<template>
  <div class="classify app_content">
    <!-- 导航栏  titelText="新增编辑"-->
    <div class="header_body">
      <header-nav :slefBack="true" :titelText="titelText" @goBack="goBack"> </header-nav>
    </div>
    <div class="detail_body">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
              required
              v-model="itemInfo.provinceCity"
              is-link
              readonly
              name="area"
              label="地区选择"
              placeholder="点击选择省市"
              @click="showArea = true"
          />
          <van-popup v-model:show="showArea" destroy-on-close position="bottom">
            <cascader
                v-model="cascaderValue"
                title="请选择"
                @close="showArea = false;"
                @finish="onFinish"/>
          </van-popup>
          <van-field
              required
              v-model="itemInfo.ownerName"
              name="机主名称"
              label="机主名称"
              placeholder="机主名称"
              :rules="[{ required: true, message: '请填写机主名称' }]"
          />
          <van-field
              required
              v-model="itemInfo.machineryLicense"
              name="车牌号码"
              label="车牌号码"
              placeholder="车牌号码"
              :rules="[{ required: true, message: '请填写车牌号码' }]"
          />
          <van-field
              required
              v-model="itemInfo.machineryTypeName"
              name="类型名称"
              label="类型名称"
              placeholder="类型名称"
              :rules="[{ required: true, message: '请填写类型名称' }]"
          />
          <van-field
              required
              v-model="itemInfo.machineryModel"
              name="型号"
              label="型号"
              placeholder="型号"
              :rules="[{ required: true, message: '请填写型号' }]"
          />
          <van-field
              required
              v-model="itemInfo.submitTime"
              is-link
              readonly
              name="datePicker"
              label="时间选择"
              placeholder="点击选择时间"
              @click="showPickerData = true"
          />
          <van-popup v-model:show="showPickerData" destroy-on-close position="bottom">
            <van-date-picker
                :model-value="pickerValueData"
                @confirm="onConfirmData"
                @cancel="showPickerData = false"
            />
          </van-popup>
          <van-field required name="radio" label="审核类型">
            <template #input>
              <van-radio-group v-model="itemInfo.checkType" direction="horizontal">
                <van-radio name="1">年审</van-radio>
                <van-radio name="2">初审</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field required name="radio" label="审核状态">
            <template #input>
              <van-radio-group v-model="itemInfo.checkState">
                <van-radio style="margin-bottom: 5px" name="0">未审核</van-radio>
                <van-radio style="margin-bottom: 5px" name="1">通过</van-radio>
                <van-radio style="margin-bottom: 5px" name="-1">驳回</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>

    </div>
  </div>
</template>
<script setup name="ItemEdit">
import Cascader from "@/components/cascader/index.vue"
import {showDialog} from "vant";
import {ADD_SAVE_APPOINTMENT, UPDATE_SAVE_APPOINTMENT} from "@/api/cooperativeOffice/firstTrial.js";
const router = useRouter()
const titelText = ref("")
const itemInfo = ref({
  appointmentId: ""
})
onMounted(() => {
  const query = router?.currentRoute?.value?.query;
  itemInfo.value = query.itemInfo ? JSON.parse(query.itemInfo) : {}
  titelText.value = itemInfo.value.appointmentId ? '编辑预约信息' : '新增预约信息'
  if (itemInfo.value.cityName) {
    itemInfo.value.provinceCity = itemInfo.value.cityName + itemInfo.value.districtName
  } else {
    itemInfo.value.provinceCity = ""
  }
})
const result = ref('');
const showArea = ref(false);

const showPickerData = ref(false);
const pickerValueData = ref([]);
const onConfirmData = ({ selectedValues }) => {
  itemInfo.value .submitTime= selectedValues.join('-');
  pickerValueData.value = selectedValues;
  showPickerData.value = false;
};
const cascaderValue = ref('');
const onFinish = ({ selectedOptions }) => {
  showArea.value = false
  cascaderValue.value = selectedOptions.map((option) => option.name).join('/');
  itemInfo.value.cityCode = selectedOptions[0].code
  itemInfo.value.cityName = selectedOptions[0].name
  itemInfo.value.districtCode = selectedOptions[1].code
  itemInfo.value.districtName = selectedOptions[1].name
  itemInfo.value.provinceCity = itemInfo.value.cityName + itemInfo.value.districtName
};
const onSubmit = async (values) => {
  const id = itemInfo.value.appointmentId;
  let res
  if (id) {
    res = await UPDATE_SAVE_APPOINTMENT(itemInfo.value);
  } else {
    res = await ADD_SAVE_APPOINTMENT(itemInfo.value);
  }
  if (res?.code == 20000) {
    showDialog({
      message: '操作成功',
    }).then(() => {
      goBack()
    });
  }
};
const goBack = () => {
  router.go(-1);
};
</script>
<style lang="less" scoped>
.classify {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background-color: #f4f4f4;
}
</style>